<template>
	<div class="page_root" id="root_index">
		<div class="warp">
			<div class="container-fluid">
				<el-row>
					<el-col :span="4">
						<div_label bg_color="bg_purple" icon="el-icon-user-solid" :url="url_user_count" unit="人"
								  title="用户数量"></div_label>
					</el-col>
<!--					<el-col :span="4">-->
<!--						<div_label bg_color="bg_green" icon="el-icon-view" :url="url_article_hits" unit="次"-->
<!--								  title="文章浏览量"></div_label>-->
<!--					</el-col>-->
				</el-row>

				<el-row>
												<el-col v-if="$check_figure('/homestay_information/table')" :span="8">
						<div class="card chart">
																														<pieChart v-if="list_homestay_information.length" id="list_homestay_information" :list="list_homestay_information" :title="'民宿信息统计'"></pieChart>
							<div v-if="!list_homestay_information.length">民宿信息没有符合条件的数据</div>
																																																																														</div>
					</el-col>
							<el-col v-if="$check_figure('/homestay_orders/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_homestay_orders.values.length > 0" id="bar_obj_homestay_orders" :vm="bar_obj_homestay_orders" :title="'民宿订单统计'">
							</newBarChart>
							<div v-if="!bar_obj_homestay_orders.values.length">民宿订单没有符合条件的数据</div>
								</div>
					</el-col>
										<el-col v-if="$check_figure('/homestay_and_catering/table')" :span="8">
						<div class="card chart">
																																					<pieChart v-if="list_homestay_and_catering.length" id="list_homestay_and_catering" :list="list_homestay_and_catering" :title="'民宿餐饮统计'"></pieChart>
							<div v-if="!list_homestay_and_catering.length">民宿餐饮没有符合条件的数据</div>
																																											</div>
					</el-col>
							<el-col v-if="$check_figure('/catering_orders/table')" :span="8">
						<div class="card chart">
									<newBarChart v-if="bar_obj_catering_orders.values.length > 0" id="bar_obj_catering_orders" :vm="bar_obj_catering_orders" :title="'餐饮订单统计'">
							</newBarChart>
							<div v-if="!bar_obj_catering_orders.values.length">餐饮订单没有符合条件的数据</div>
								</div>
					</el-col>
					</el-row>

			</div>
		</div>
	</div>
</template>
<script>
	import mixin from "@/mixins/page.js";
	import pieChart from "@/components/charts/pie_chart";
	import newBarChart from "@/components/charts/new_bar_chart";
	import div_label from "@/components/div_label.vue";
	export default {
		mixins: [mixin],
		name: "Home",
		components: {
			pieChart,
			newBarChart,
			div_label
		},
		data() {
			return {
				activeName: "third",
																	list_homestay_information: [],
						bar_obj_homestay_orders: {
					names:[],
					xAxis: [],
					values:[]
				},
												list_homestay_and_catering: [],
						bar_obj_catering_orders: {
					names:[],
					xAxis: [],
					values:[]
				},
					url_user_count: "~/api/user/count?",
				url_article_hits: "~/api/article/sum?field=hits",
			};
		},
		created() {
        // 执行民宿信息数据获取
        this.get_list_homestay_information();
        // 执行民宿订单数据获取
        this.get_list_homestay_orders();
        // 执行民宿餐饮数据获取
        this.get_list_homestay_and_catering();
        // 执行餐饮订单数据获取
        this.get_list_catering_orders();
			},
		mounted() {},
		methods: {
			async get_nickname(list,flag){
				if (flag) {
					for (let i=0;i<list.length;i++){
						await this.$get(
								"~/api/user/get_obj?user_id="+list[i],
								null,
								(json) => {
									if (json.result) {
										list[i] = json.result.obj.nickname;
									}
								});
					}
				}else {
					for (let i=0;i<list.length;i++){
						await this.$get(
								"~/api/user/get_obj?user_id="+list[i].name,
								null,
								(json) => {
									if (json.result) {
										list[i].name = json.result.obj.nickname;
									}
								});
					}
				}
			},
    // 获取民宿信息统计图数据
			get_list_homestay_information() {
        let data = {};
        let flag = false;
        let user_group = this.$store.state.user.user_group;
        let user_id = this.$store.state.user.user_id;
        if (user_group!='管理员'){
          let sqlwhere = "(";
          if (user_group=="商家用户"){
            sqlwhere+= "merchant_users = " + user_id + " or ";
          }
          if (sqlwhere.length>1){
            sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);
            sqlwhere += ")";
            data.sqlwhere = sqlwhere;
          }
        }
        this.$get("~/api/homestay_information/list_group?groupby=types_of_homestays", data, (json) => {
        if (json.result) {
          var list = json.result.list;
          this.list_homestay_information = list.map((o) => {
          return {
            name: o[1],
            value: o[0]
          };
          });
          if (flag){
             this.get_nickname(this.list_homestay_information,false);
          }
        }
        });
			},
																																																							// 获取民宿订单统计图
			async get_list_homestay_orders() {
				let name_list = [];
				let query_str = "";
																									let group_by_value = "types_of_homestays";
								let flag = false;
												let date_flag = "其他"
																																																														name_list.push("预约天数");
				query_str = query_str+"appointment_days"+","
																	this.bar_obj_homestay_orders.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						let user_group = this.$store.state.user.user_group;
				let user_id = this.$store.state.user.user_id;
				if (user_group!='管理员'){
								let sqlwhere = "(";
														if (user_group=="商家用户"){
						sqlwhere+= "merchant_users = " + user_id + " or ";
					}
																																																							if (user_group=="普通用户"){
						sqlwhere+= "ordinary_users = " + user_id + " or ";
					}
																																																		if (sqlwhere.length>1){
						sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);
						sqlwhere += ")";
						data.sqlwhere = sqlwhere;
					}
							}
						await this.$get(
						"~/api/homestay_orders/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_homestay_orders.xAxis = xAxis;
								this.bar_obj_homestay_orders.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_homestay_orders.xAxis,true);
							}
						});
			},
																															// 获取民宿餐饮统计图数据
			get_list_homestay_and_catering() {
				let data = {};
								let flag = false;
												let user_group = this.$store.state.user.user_group;
				let user_id = this.$store.state.user.user_id;
				if (user_group!='管理员'){
										let sqlwhere = "(";
																		if (user_group=="商家用户"){
						sqlwhere+= "merchant_users = " + user_id + " or ";
					}
																																																																																																													if (sqlwhere.length>1){
						sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);
						sqlwhere += ")";
						data.sqlwhere = sqlwhere;
					}
									}
								this.$get("~/api/homestay_and_catering/list_group?groupby=food_name", data, (json) => {
					if (json.result) {
						var list = json.result.list;
						this.list_homestay_and_catering = list.map((o) => {
							return {
												name: o[1],
												value: o[0]
							};
						});
						if (flag){
							this.get_nickname(this.list_homestay_and_catering,false);
						}
					}
				});
			},
					// 获取餐饮订单统计图
			async get_list_catering_orders() {
				let name_list = [];
				let query_str = "";
																																	let group_by_value = "food_name";
								let flag = false;
												let date_flag = "其他"
																																														name_list.push("购买数量");
				query_str = query_str+"purchase_quantity"+","
																																									this.bar_obj_catering_orders.names = name_list
				query_str = query_str.substr(0,query_str.length-1);
				let data = {};
						let user_group = this.$store.state.user.user_group;
				let user_id = this.$store.state.user.user_id;
				if (user_group!='管理员'){
								let sqlwhere = "(";
														if (user_group=="商家用户"){
						sqlwhere+= "merchant_users = " + user_id + " or ";
					}
																																																							if (user_group=="普通用户"){
						sqlwhere+= "ordinary_users = " + user_id + " or ";
					}
																																																																				if (sqlwhere.length>1){
						sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);
						sqlwhere += ")";
						data.sqlwhere = sqlwhere;
					}
							}
						await this.$get(
						"~/api/catering_orders/bar_group?field="+query_str+"&groupby="+group_by_value,
						data,
						(json) => {
							if (json.result) {
								let xAxis = [];
								let values = [];
								json.result.list.map((o) => {
									if (date_flag === "日期") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd"));
									}else if (date_flag === "时间") {
										xAxis.push(this.$toTime(o[0] ,"hh:mm:ss"));
									}else if (date_flag === "日长") {
										xAxis.push(this.$toTime(o[0] ,"yyyy-MM-dd hh:mm:ss"));
									}else {
										xAxis.push(o[0]);
									}
									values.push(o.splice(1))
								});
								this.bar_obj_catering_orders.xAxis = xAxis;
								this.bar_obj_catering_orders.values = values;
							}
							if (flag){
								this.get_nickname(this.bar_obj_catering_orders.xAxis,true);
							}
						});
			},

		},
		computed:{
			recognitionHeight(){
				return "830px"
			},
			recognitionUrl(){
				return "https://www.faceplusplus.com.cn/${model.filter.recognitionType}/"
			}
		}
	};
</script>

<style scoped="scoped">
	.chart {
		display: block;
		width: 100%;
		height: 400px;
		padding: 1rem;
		position: relative;
	}

	.el-col {
		padding: 0.5rem;
	}

	.card {
		overflow: hidden;
	}

	.iframe_box ,.iframe_box_change{
		width: 100%;
		height: 1180px;
		position: relative;
		margin-top: 25px;
	}
	.iframe_box_change{
		height: 580px;
		padding-top: 50px;
	}
	.iframe_box	.iframe_box_content, .iframe_box_change .iframe_box_content{
		width: 100%;
		height: 100%;
	}
	.iframe_box_top{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		font-size: 25px;
		line-height: 100px;
		background: #fff;
		z-index: 99999999;
		padding-left: 50px;
	}
	#iframe_box_face div::before {
		content: '';
		width: 100px;
		position: absolute;
		top: 154px;
		right: 129px;
		z-index: 999;
		height: 20px;
		background-color: #FFFFFF;
	}

	#iframe_box_face>h1 {
		margin-top: 100px;
		margin-bottom: 20px;
	}
</style>
